import { getCategoryList } from "@/api/category";
import { getSubjectCharts } from "@/api/subject";
import { FireOutlined } from "@ant-design/icons";
import { Avatar, Card, Col, Row, Tabs, TabsProps, Tag } from "antd";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const CategoryTabs = () => {
    const [items, setItems] = useState<TabsProps['items']>([]);
    const [userCharts, setUserCharts] = useState<UserCharts[]>([])

    useEffect(() => {
        getCategoryList().then(res => {
            const result = res.map(item => {
                return {
                    key: item.id,
                    label: <div className="flex items-center" key={item.id}><img className="w-[20px] mr-3" src={item.imageUrl} />{item.categoryName}</div>,
                    children: <div className=" grid grid-cols-10">
                        {
                            item.labelList?.map(label => <Tag key={label.id}>
                                <Link target="__blank" to={'/label-subject/' + label.id + '/label'}>
                                    <div className="flex items-center justify-center py-2 cursor-pointer">
                                        <img className="w-[24px] mr-2" src={label.imageUrl} /> <span>{label.labelName}</span>
                                    </div>
                                </Link>

                            </Tag>)
                        }
                    </div>
                }
            }) as unknown as TabsProps['items'];
            setItems(result)
        })

        getSubjectCharts().then(res => {
            setUserCharts(res);
        })

    }, [])

    return <div>
        <Tabs defaultActiveKey="1" items={items} />
        <Row gutter={24} className="mt-6">
            <Col span={8}>
                <Card title="刷题排行榜">
                    {
                        userCharts.map(item => <div className="flex items-center justify-between" key={item.userId}>
                            <div>
                                <Avatar src={item.avatar}></Avatar>
                                <span className="ml-2">{item.username}</span>
                            </div>
                            <div>
                            <FireOutlined /> {item.questionCount}
                            </div>
                        </div>)
                    }
                </Card>
            </Col>
            <Col span={8}>
                <Card title="出题贡献排行榜">

                </Card>
            </Col>
            <Col span={8}>
                <Card title="热门题目排行榜">

                </Card>
            </Col>
        </Row>
    </div>
}

export default CategoryTabs;